import { Button } from "antd";
import { useCallback, useEffect, useState } from "react";
import './index.less';
import $ from 'jquery';

const BannerPage = () => {
    let arrays = [0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4];
    let [active, setActive] = useState(5);

    const func = useCallback((items: JQuery<HTMLElement>, wrapItems: JQuery<HTMLElement>, _active?: number) => {
        _active ??= active;
        items.each(function (index, item) {
            let zoom = Math.abs(_active! - index) * 0.1;
            let scale = 1 - zoom;
            $(item).css("scale", scale)
            wrapItems.get(index)!.style.left = ((index - _active! + 2) * 20) + "%";
        })
    }, [active])


    useEffect(() => {
        func($(".item"), $(".wrap-item"));

        setTimeout(() => {
            if (active === 2 || active === 12) {
                let items = $(".item");
                let wrapItem = $(".wrap-item");
                items.toggleClass("item");
                wrapItem.toggleClass("wrap-item");
                setActive(7);
                func(items, wrapItem, 7);
                setTimeout(() => {
                    items.toggleClass("item");
                    wrapItem.toggleClass("wrap-item");
                }, 50);
            }
        }, 400);
    }, [active])

    return (
        <div style={{ height: "100vh", background: "#000", }}>
            <div style={{ height: "80vh", position: "relative", background: "#000", display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-around" }} >
                {
                    arrays.map((p, index) => {
                        return (
                            <div key={index} style={{ width: "20%", position: "absolute" }} className="wrap-item" >
                                <div style={{ height: "80vh", padding: 24 }} className="item" >
                                    <div style={{ width: "100%", background: "#ffffff", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }} >
                                        {p}
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
            <Button onClick={() => {
                setActive(active - 1)
            }} >上一个</Button>
            <Button onClick={() => {
                setActive(active + 1)
            }} >下一个</Button>
        </div>
    )
}

export default BannerPage;